<template>
    <div class="content-box clearfix">
        <div class="center" v-if="matchStatus < 5">
          赛事报名未截止，等待报名截止，才能创建赛程！
        </div>

        
        <div v-else>
          <div v-if="!hasSchedule" class="creatAgendaBtn">
            <!--淘汰赛-->
            <div v-if="isKnockout">
              <h2 class="creatAgendatips">淘汰赛先创建签表吧</h2> 
              <el-button type="primary" @click="dVisible=true">创建签表</el-button>
            </div>
            <!--双循环-->
            <div v-if="isLeague"> 
              <FileUpload
                  accept=".xlsx,xls"
                  class="upload-demo"
                  :action="uploadUrl"
                  :on-error="errorUpload"
                  @success="handleUploadSuccess"
                  :before-upload="beforeUpload"
                  :show-file-list="false">
                  <el-button size="mini" type="primary" id="btnUpload" class="btnUpload"><input type="hidden"></el-button>
              </FileUpload>
              <h2 class="creatAgendatips">积分联赛请创建赛程吧</h2>
              <el-button type="primary" @click="confirmVisible = true">创建赛程</el-button>
            </div>
            <!--杯赛-->
            <div v-if="isCup" class="center">
              <img src="/static/images/cup.jpg">
              <p class="creatAgendatips" style="margin-bottom:20px;">杯赛请先创建分组</p>
              <router-link :to="{path: '/race/detail/manage/group',query: this.$route.query}">
                <el-button type="primary">创建分组</el-button>
              </router-link>
              
            </div>
          </div>
        </div>  

      <!--单淘汰赛弹框1-->
      <el-dialog 
        class="tiny-dialog"
        :top="'35%'"
        :title="'温馨提示'"
        :visible.sync="dVisible"
        @close="dVisible = false">
        <p>{{dialogTips}}</p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="goCreateSemifnalTable">手动录入</el-button>
          <el-button type="primary" @click="showConfirmSeed">自动生成</el-button>
        </span>
      </el-dialog>
      <!--单淘汰赛弹框2-->
      <el-dialog
        class="tiny-dialog"
        :top="'35%'"
        :title="'温馨提示'"
        :visible.sync="seedVisible"
        @close="seedVisible = false">
        <p>是否标记种子球队/选手？</p>
        <span slot="footer" class="dialog-footer">
          <router-link :to="{path: '/race/detail/manage/markseed', query: this.$route.query}">
            <el-button>标记</el-button>
          </router-link>
          <el-button type="primary" @click="gotoCheckTable">不标</el-button>
        </span>
      </el-dialog>


      <!--双循环第一步-->    
      <el-dialog 
        class="tiny-dialog"
        :top="'35%'"
        :title="'温馨提示'"
        :visible.sync="confirmVisible"
        @close="confirmVisible = false">
        <p>请选择创建赛程的方式</p>  
        <span slot="footer" class="dialog-footer">
          <el-button @click="openDialog">导入赛程</el-button>
          <el-button type="primary" @click="goGenerate">自动生成</el-button>
        </span>
      </el-dialog>
      <!--双循环第二步--> 
       <el-dialog 
        class="tiny-dialog"
        :top="'35%'"
        :title="'温馨提示'"
        :visible.sync="dialogVisible"
        @close="dialogVisible = false">
        <p>请选择创建赛程的方式</p>  
        <span slot="footer" class="dialog-footer">
          <el-button @click="downloadTemp">下载模板</el-button>
          <el-button type="primary" @click="nextStep">下一步</el-button>
        </span>
      </el-dialog>
      <!--双循环最后一步--> 
      <el-dialog 
        class="tiny-dialog"
        :top="'35%'"
        :title="'温馨提示'"
        :visible.sync="lastStepVisible"
        @close="lastStepVisible = false">
        <p>请选择创建赛程的方式</p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="prevStep">上一步</el-button>
          <el-button type="primary" @click="uploadAuto">上传赛程</el-button>
        </span>
      </el-dialog>
    
    </div>
</template>
<script>
  import api from 'api/race'
  import {downloadFile} from 'utils'
  import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters({
        race_detail: 'race_detail'
      }),
      isLeague () { // 是积分联赛双循环
        return this.race_detail.matchFormatStr.includes('积分')
      },
      isKnockout () { // 淘汰赛
        return ['淘汰制1场', '淘汰赛1场'].indexOf(this.race_detail.matchFormatStr) > -1
      },
      isCup () { // 杯赛
        return this.race_detail.matchFormatStr.includes('杯赛')
      },
      btnTextCancel () {
        return this.isLeague ? '导入赛程' : '手动录入'
      },
      btnTextConfirm () {
        return '自动生成'
      },
      dialogTips () { // 淘汰赛和积分双循环的赛内容提示
        return this.isLeague ? '请选择创建赛程的方式' : '请选择创建签表方式'
      },
      uploadUrl () {
        let orgId = localStorage.getItem('auth_orgId') || ''
        return '/api/match/schedule/upload?matchId=' + this.$route.query.id + '&authOrgId=' + orgId
      }
    },
    created () {
      this.isHaveSchedule()
    },
    watch: {
      '$route': 'isHaveSchedule'
    },
    data () {
      return {
        seedVisible: false, // 签表弹框2
        dVisible: false, // 签表弹框1
        hasSchedule: false, // 是否有赛程
        matchStatus: 1, // 赛事状态 6：报名截止
        confirmVisible: false, // 积分联赛弹框1
        dialogVisible: false, // 积分联赛弹框2
        lastStepVisible: false // 积分联赛弹框3
      }
    },
    methods: {
      closeDialog () {
        this.dialogVisible = false
      },
      // 打开第二个对话框
      openDialog () {
        this.confirmVisible = false
        this.dialogVisible = true
      },
      nextStep () {
        this.dialogVisible = false
        this.lastStepVisible = true
      },
      prevStep () {
        this.dialogVisible = true
        this.lastStepVisible = false
      },
      handleUploadSuccess (res, file) {
        if (res.result === '0') {
          this.$message('上传成功')
          this.$router.push({
            path: '/race/detail/manage/preview',
            query: this.$route.query
          })
          this.lastStepVisible = false
        } else {
          this.$message({
            message: res.msg,
            type: 'warning'
          })
          this.lastStepVisible = false
        }
      },
      beforeUpload (file) {
        console.log(file)
      },
      errorUpload (res, file) {
        this.$message({
          message: '上传失败',
          type: 'warning'
        })
      },
      // 手动创建淘汰赛事签表
      goCreateSemifnalTable () {
        this.$route.query.isedit = 'no'
        this.$router.push({
          path: '/race/detail/manage/createsigntable',
          query: this.$route.query
        })
      },
      // 跳转到自动生成赛程
      goGenerate () {
        if (this.race_detail.status >= 5) {
          this.$router.push({
            path: '/race/detail/manage/generate',
            query: this.$route.query
          })
        } else {
          let msg = this.race_detail.status <= 2 ? '赛事未通过审核' : '赛事还未报名结束！'
          this.$message({
            message: msg,
            type: 'warning'
          })
        }
      },
      // 弹出是否标记种子弹框
      showConfirmSeed () {
        this.dVisible = false
        this.seedVisible = true
      },
      //  创建签表并跳转签表页
      gotoCheckTable () {
        api.checkTableAuto({
          matchId: parseInt(this.$route.query.id)
        }).then((res) => {
          this.seedVisible = false
          this.$router.push({
            path: '/race/detail/manage/checktable',
            query: this.$route.query
          })
        })
      },
      // 下载赛程模板
      downloadTemp (ev) {
        let url = '/api/match/schedule/download/template?matchId=' + this.$route.query.id
        var _this = this
        downloadFile(url, '赛程模板.xls', function (res) {
          _this.$message({
            message: '下载出错，请稍后再试',
            type: 'warning'
          })
        })
        this.closeDialog()
      },
      //  双循环比赛自动生成赛程弹框
      uploadAuto () {
        var btn = document.querySelectorAll('#btnUpload input')
        btn[0].click()
        this.lastStepVisible = false
      },
      isHaveSchedule () {
        api.isHaveSchedule({matchId: this.$route.query.id}, this).then((res) => {
          this.hasSchedule = res.data.createdSchedule
          this.matchStatus = res.data.matchStatus
          if (this.hasSchedule && res.data.createdDraw) { // 已生成赛程
            let toUrl = ''
            if (this.isKnockout) { // 单淘汰赛
              toUrl = '/race/detail/manage/schedulecheck'
            } else if (this.isLeague) { // 双循环
              toUrl = '/race/detail/manage/edit'
            } else {
              toUrl = '/race/detail/manage/schedulecup'
            }
            this.$router.push({
              path: toUrl,
              query: this.$route.query
            })
          }
          if (res.data.createdDraw && !this.hasSchedule) { // 未生成赛程
            if (this.isKnockout) { // 淘汰赛生成签表
              this.$router.push({
                path: '/race/detail/manage/checktable',
                query: this.$route.query
              })
            } else if (this.isCup) {
              this.$router.push({ // 杯赛已生成分组
                path: '/race/detail/manage/cup',
                query: this.$route.query
              })
            }
          }
        })
      }
    }
  }
</script>


<style scoped lang='scss'>
.creatAgendaBtn {
  text-align: center;
  .creatAgendatips{
    color: #333;
    font-size: 20px;
    font-weight: 400;
    line-height: 100%;
    margin-bottom: 40px;
    text-align: center;
  }
}
.btnUpload {
  visibility: hidden
}
.center{
  text-align: center;
}
</style>
<style>
.tiny-dialog .el-dialog{
    width: 420px!important;
}
</style>
